<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button class="get">获取</button>
        <button class="set">设置</button>
    </div>
    <!-- <input type="file" multiple="multiple"> -->

    <select class="year" multiple="multiple">
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
    </select>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];
    var yearSel = document.getElementsByClassName("year")[0];

    // 元素节点的属性 _ 下拉框
    // value 获取和设置下拉框的value值 
    //       1. 如果option中存在value属性,则优先取option中的value值
    //       1. 如果option中不存在value属性,则取option标签内的值

    // selectedIndex  获取和设置被选中的option的下标
    // selectedOptions  获取被选中的option的集合 (一般用于多选)

    getBtn.onclick = function () {
        console.log(yearSel.value);
        console.log(yearSel.selectedIndex);
        console.log(yearSel.selectedOptions);
    }
    setBtn.onclick = function () {
        // yearSel.value = "2022";
        yearSel.selectedIndex = 21;
    }

</script>

</html>